<!--延时设置-->
<template>
  <div class="delaySet">
    <el-row class="btnBox">
      <span @click="openDialog(1)">延时设置</span>
    </el-row>
    <el-row class="tabTitle">
      <el-col :span="3">序号</el-col>
      <el-col :span="2">延时团队</el-col>
      <el-col :span="4">延时岗位</el-col>
      <el-col :span="4">对应账号</el-col>
      <el-col :span="5">发布时间</el-col>
      <el-col :span="2">延时时长</el-col>
      <el-col :span="4">倒计时</el-col>
    </el-row>
    <el-row class="delaySetContent" :class="index == (list.length - 1)?'borderBottom':''" v-for="(item,index) in list"
            :key="'d'+index">
      <el-col :span="3">
        <p>
          {{index+1}}
        </p>
      </el-col>
      <el-col :span="2">
        <p>
          {{item.GroupNo}}
        </p>
      </el-col>
      <el-col :span="4">
        <p>
          {{item.PositionName}}
        </p>
      </el-col>
      <el-col :span="4">
        <p>
          {{item.MobilePhone}}
        </p>
      </el-col>
      <el-col :span="5">
        <p>
          {{item.CreateTime2}}
        </p>
      </el-col>
      <el-col :span="2">
        <p>
          {{item.DelayMinutes}}
        </p>
      </el-col>
      <el-col :span="4">
        <p>
          {{item.countDown}}
        </p>
      </el-col>
    </el-row>
    <el-row v-if="list.length < 1" class="placeholderInfo">
      <p>暂无延时记录</p>
    </el-row>
    <el-dialog
      class="delaySetDialog"
      :class="dialogType == 1?'delaySetDialog2':''"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="750px">
      <p slot="title" class="title" :class="dialogType == 1?'borderBottom':''"><span class="name">{{dialogType != 2?'延时设置':'延时明细'}}</span>
      </p>
      <div v-if="dialogType == 1" class="delaySetSet">
        <el-form ref="ruleForm" label-width="80px" label-position="left">
          <div v-for="(form,k) in ruleForm" :key="'k'+k" class="delaySetSetItem">
            <el-form-item label="选择工位号" class="stationCode" prop="stationCode">
              <el-select v-model="form.stationCode" filterable placeholder="请选择工位号"
                         @change="groupSelectFn(form.stationCode,k)">
                <el-option v-for="group in groupNoList" :key="'a'+group" :value="group"></el-option>
              </el-select>
              <span class="text">组/号</span>
            </el-form-item>
            <el-form-item label="延时岗位" class="delayPost">
              <!--       unifyOrSeparateFn-->
              <el-radio-group v-model="form.delayPost" class="delayPostBox" @change="form.postName = []">
                <!--     统一延时还是分岗延时-->
                <div v-for="(delay,ind) in delayPostData" :key="delay.value" :class="{'unify':ind===0}"
                     :style="form.delayPost === 0?'marginBottom:20px':''">
                  <el-radio :label="delay.label">{{delay.value}}</el-radio>
                  <!--       统一延时-->
                  <div v-if="form.delayPost === 0 && ind === 0" class="delayPostName1">
                    <el-radio-group v-model="form.delayPostName" @change="form.delayMinute = ''">
                      <div v-for="(delay2,index) in form.taskInfo" :key="delay2.CaseId" class="unify2">
                        <!--       大数据的时候显示3岗-->
                        <el-radio :label="delay2.CompetitionVenuesType" v-if="delay2.CompetitionVenuesType == 1">
                          {{delay2.MatchName}}(4岗）
                        </el-radio>
                        <el-radio :label="delay2.CompetitionVenuesType" v-else>{{delay2.MatchName}}(3岗）</el-radio>
                        <div class="delayMinute" v-if="form.delayPostName == delay2.CompetitionVenuesType">
                          <el-input size="small" placeholder="时长" v-model="form.delayMinute"
                                    @input="inputNumberChangeFn(form.delayMinute,'delayMinute',k)"></el-input>
                          <span class="text">分钟</span>
                        </div>
                      </div>
                    </el-radio-group>
                  </div>
                  <!--     分岗延时-->
                  <div v-if="form.delayPost === 1 && ind === 1" class="delayPostName2">
                    <div class="differentiate">
                      <el-radio-group class="competition" v-model="form.delayPostName2" @change="form.postName = []">
                        <div v-for="(delay2,index) in form.taskInfo" :key="delay2.value" class="unify">
                          <el-radio :label="delay2.CompetitionVenuesType">{{delay2.MatchName}}</el-radio>
                          <!-- 当选择的分岗延时场次类型和数据的场次类型相同就显示-->
                          <el-checkbox-group v-model="form.postName"
                                             v-if="form.delayPostName2 == delay2.CompetitionVenuesType">
                            <div class="item" v-for="(obj,m) in delay2.PositionUserInfos" :key="'m'+m">
                              <!--     因为大数据分析师不能延时，所以隐藏-->
                              <el-checkbox :label="obj" name="type"
                                           :disabled="obj.PositionId == 934156270338053 && obj.PositionName == '大数据分析师'">
                                {{obj.PositionName}}
                              </el-checkbox>
                              <div class="right"
                                   v-if="(form.postName.filter(v => (v.MobilePhone == obj.MobilePhone && v.PositionId == obj.PositionId))).length > 0">
                                <el-input size="small" disabled="" v-model="obj.MobilePhone"
                                          style="width: 180px;"></el-input>
                                <el-input size="small" class="delayMinute" placeholder="时长"
                                          v-model="obj.DelayMinutes"></el-input>
                                <span class="text">分钟</span>
                              </div>
                            </div>
                          </el-checkbox-group>
                        </div>
                      </el-radio-group>
                      <div class="competition"></div>

                    </div>
                  </div>
                </div>
              </el-radio-group>

            </el-form-item>
            <span v-if="ruleForm.length > 1" class="deleteItem el-icon-delete" @click="deleteItemFn(k)"></span>
          </div>
        </el-form>
      </div>
      <div v-if="dialogType == 2" class="delayDetailDialog">
        <el-row class="tabTitle">
          <el-col :span="2">序号</el-col>
          <el-col :span="4">工号位(组/号)</el-col>
          <el-col :span="4">延时岗位</el-col>
          <el-col :span="4">岗位名</el-col>
          <el-col :span="3">延时时长</el-col>
          <el-col :span="4">倒计时</el-col>
          <el-col :span="3" class="operation"><p>一键交卷</p></el-col>
        </el-row>
        <el-row class="tabBody bdt" v-for="(item,index) in delayDetailList" :key="'q'+index"
                :class="item.delayPost == 1?'':'bdbn'">
          <el-col :span="2" class="serial">
            <p>{{index+1}}</p>
          </el-col>
          <el-col :span="4" class="teamNumber">
            <p>{{item.teamNumber}}</p>
          </el-col>
          <el-col :span="4" class="delayPost">
            <p>{{item.delayPost == 1?'分岗位延时':'统一延时'}}</p>
          </el-col>
          <el-col :span="4" class="postName">
            <p>{{item.delayPost == 1?`${item.postName.length>0?item.postName[0].name:''}`:'全部'}}</p>
          </el-col>
          <el-col :span="3" class="delayTime">
            <p>{{item.delayPost ==
              1?`${item.postName.length>0?item.postName[0].delayTime:''}`:`${item.delayTime}`}}分钟</p>
          </el-col>
          <el-col :span="4" class="countDown">{{item.delayPost ==
            1?`${item.postName.length>0?item.postName[0].countDown:''}`:`${item.countDown}`}}
          </el-col>
          <el-col :span="3" class="operation"><p>一键交卷</p></el-col>
          <el-col :span="24" v-if="item.delayPost == 1 && item.postName.length>1" class="morePost">
            <el-row v-for="(post,k) in item.postName.slice(1)" :key="'k'+k">
              <el-col :span="2"><p></p></el-col>
              <el-col :span="4"><p></p></el-col>
              <el-col :span="4" class="delayPost"><p></p></el-col>
              <el-col :span="4" class="postName"><p>{{post.name}}</p></el-col>
              <el-col :span="3" class="delayTime">{{post.delayTime}}分钟</el-col>
              <el-col :span="4" class="countDown">{{post.countDown}}</el-col>
              <el-col :span="3" class="operation"><p>一键交卷</p></el-col>
            </el-row>
          </el-col>
        </el-row>

      </div>
      <div v-if="dialogType == 3" class="delayDetailDialog">
        <!-- <el-row class="tabTitle">
           <el-col :span="2" class="">序号</el-col>
           <el-col :span="4" class="">工号位(组/号)</el-col>
           <el-col :span="4" class="bdr">延时岗位</el-col>
           <el-col :span="5" class="bdr">岗位名</el-col>
           <el-col :span="5" class="bdr">对应账号</el-col>
           <el-col :span="4">延时时长</el-col>
         </el-row>
         <el-row class="tabBody bdt" v-for="(item,index) in ruleForm" :key="'q'+index"
                 :class="item.delayPost == 1?'':'bdbn'">
           <el-col :span="2" class="serial">
             <p>{{index+1}}</p>
           </el-col>
           <el-col :span="4" class="teamNumber">
             <p>{{item.stationCode}}</p>
           </el-col>
           <el-col :span="4" class="delayPost">
             <p>{{item.delayPost == 1?'分岗位延时':'统一延时'}}</p>
           </el-col>
           <el-col :span="5" class="postName">
             <p>{{item.delayPost == 1?`${item.postName.length>0?item.postName[0].PositionName:''}`:'全部'}}</p>
           </el-col>
           <el-col :span="5" class="postName">
             <p>{{item.delayPost == 1?`${item.postName.length>0?item.postName[0].MobilePhone:''}`:'无'}}</p>
           </el-col>
           <el-col :span="4" class="delayTime">
             <p>{{item.delayPost ==
               1?`${item.postName.length>0?item.postName[0].Minute:''}`:`${item.delayMinute}`}}分钟</p>
           </el-col>
           <el-col :span="24" v-if="item.delayPost == 1 && item.postName.length>1" class="morePost">
             <el-row v-for="(post,k) in item.postName.slice(1)" :key="'k'+k">
               <el-col :span="2"><p></p></el-col>
               <el-col :span="4"><p></p></el-col>
               <el-col :span="4" class="delayPost"><p></p></el-col>
               <el-col :span="5" class="postName"><p>{{post.PositionName}}</p></el-col>
               <el-col :span="5" class="postName"><p>{{post.MobilePhone}}</p></el-col>
               <el-col :span="4" class="delayTime">{{post.Minute}}分钟</el-col>
             </el-row>
           </el-col>
         </el-row>-->
        <el-row class="tabTitle">
          <el-col :span="4" class="bdr">工号位(组/号)</el-col>
          <el-col :span="7" class="bdr">延时岗位</el-col>
          <el-col :span="7" class="bdr">对应账号</el-col>
          <el-col :span="6">延时时长</el-col>
        </el-row>
        <el-row class="tabBody bdt" v-for="(item,index) in resolutionRuleForm" :key="'q'+index">
          <el-col :span="4" class="bdr">{{item.groupNo}}</el-col>
          <el-col :span="7" class="bdr">{{item.positionName}}</el-col>
          <el-col :span="7" class="bdr">{{item.mobilePhone}}</el-col>
          <el-col :span="6">{{item.delayMinutes}}</el-col>
        </el-row>

      </div>
      <el-dialog
        class="delaySetInnerVisibleDialog"
        width="360px"
        :visible.sync="innerVisible"
        :close-on-click-modal="false"
        append-to-body>
        <span class="textInfoMain">一旦确认，将立即生效，确认延时？</span>
        <p class="footWrap">
          <span @click="innerVisible = false">取消</span>
          <span @click="submitDelayFn">确认</span>
        </p>
      </el-dialog>
      <p slot="footer" class="dialog-footer">
        <span class="addTeam" @click="addTeam" v-if="dialogType == 1">+新增延时工位号</span>
        <span v-if="dialogType != 2" class="cancel btn" @click="noSureFn">{{dialogType == 3?'上一步':'取消'}}</span>
        <span @click="sureFn" class="sure btn"
              :class="dialogType == 1?'sure1':dialogType == 2?'sure2':dialogType == 3?'sure3':''">{{dialogType == 1?'下一步':dialogType == 2?'一键强制交卷':dialogType == 3?'确定加时':''}}
        </span>
      </p>
    </el-dialog>
  </div>

</template>

<script>
  export default {
    name: "delaySet",
    props: {
      showDialog: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        list: [],
        dialogVisible: false,
        desc: '',//公示信息
        dialogType: 1,//1延时设置 2延时明细
        innerVisible: false,//内层dialog
        delayPostData: [
          {
            label: 0,
            value: '统一延时'
          }, {
            label: 1,
            value: '分岗位延时'
          },
        ],
        groupNoList: [],//组号列表
        ruleForm: [
          {
            stationCode: '',//延时工位号
            delayPost: '',//统一延时还是分岗位延时
            delayPostName: 1,//统一延时 0,大数据，1业财税
            unifyDelayList: [],//统一延时的集合
            delayMinute: '',//统一延时分钟
            delayPostName2: 1,//分岗位延时 0,大数据，1业财税
            postName: [],//延时岗位选中
            taskInfo: [],//考试岗位信息
            selectTaskInfo: {},//选中的那场考试的信息
          },
        ],
        resolutionRuleForm: [],//拆分成需要提交的数据
        delayDetailList: [
          {
            teamNumber: 10,//工位号
            delayPost: 0,//延时岗位 0 统一延时 1 分岗位延时
            postName: [],//岗位名字
            delayTime: 10,//延时时长
          },
          {
            teamNumber: 10,//工位号
            delayPost: 1,//延时岗位 0 统一延时 1 分岗位延时
            postName: [
              {
                name: '大数据分析师',
                delayTime: 6
              }, {
                name: '投资经理',
                delayTime: 6
              }, {
                name: '大数据分析师',
                delayTime: 6
              }, {
                name: '运营经理',
                delayTime: 6
              },
            ],//岗位名字
            delayTime: 8,//延时时长
          },
          {
            teamNumber: 10,//工位号
            delayPost: 0,//延时岗位 0 统一延时 1 分岗位延时
            postName: [],//岗位名字
            delayTime: 5,//延时时长
          }, {
            teamNumber: 10,//工位号
            delayPost: 1,//延时岗位 0 统一延时 1 分岗位延时
            postName: [
              {
                name: '大数据分析师',
                delayTime: 6
              }, {
                name: '投资经理',
                delayTime: 7
              }, {
                name: '大数据分析师',
                delayTime: 3
              }, {
                name: '运营经理',
                delayTime: 9
              },
            ],//岗位名字
            delayTime: 11,//延时时长
          }, {
            teamNumber: 10,//工位号
            delayPost: 0,//延时岗位 0 统一延时 1 分岗位延时
            postName: [],//岗位名字
            delayTime: 20,//延时时长
          }],//延时明细
        times: null,
        newTime: '',//当前时间
        timesList: [],
      }
    },
    created() {
      this.getGroupNoInfoFn();
      this.getDelayRecordListFn()
    },
    mounted() {

    },
    methods: {
      //开启弹窗
      openDialog(type, val) {
        if (type == 1) {
          this.ruleForm = [
            {
              stationCode: '',//延时工位号
              delayPost: '',//统一延时还是分岗位延时
              delayPostName: 1,//统一延时场次
              unifyDelayList: [],//统一延时的集合
              delayMinute: '',//统一延时分钟
              delayPostName2: 1,//分岗位延时场次
              postName: [],//分岗延时岗位选中
              taskInfo: [],//考试岗位信息
              selectTaskInfo: {},//选中的那场考试的信息
            },
          ]
        }
        this.dialogVisible = true;
        this.dialogType = type;
      },
      onSubmit() {
        console.log('submit!');
      },
      //设置时间倒计时

      // this.$set 赋值并刷新dom
      setTime(data) {
        this.list.forEach(val => {
          this.$set(val, 'countDown', this.showtime(this.newTime, val.endTime));
        });
        this.times = setInterval(() => {
          //每隔一秒当前时间加1000毫秒
          this.newTime = this.newTime + 1000;
          // console.log('a',this.newTime);
          //清空倒计时状态列表
          this.timesList = [];
          console.log(1);
          this.list.forEach(val => {
            this.$set(val, 'countDown', this.showtime(this.newTime, val.endTime));
          })
        }, 1000);
      },
      showtime(nowtime, endtime) {
        // console.log(nowtime);
        //当当前时间你小于结束时间，向列表中push一个状态
        if (nowtime < endtime) {
          this.timesList.push(true)
        }
        //当定时器列表为空时说明所有的倒计时都已清0，移除定时器
        if (this.timesList.length < 1) {
          clearInterval(this.times);
          this.times = null;
          return '00:00:00'
        } else if (nowtime >= endtime) {//当当前时间大于等于结束时间，表明该任务已结束，返回00:00:00
          return '00:00:00'
        }
        let lefttime = endtime - nowtime,  //距离结束时间的毫秒数
          lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24),  //计算小时数
          leftm = Math.floor(lefttime / (1000 * 60) % 60),  //计算分钟数
          lefts = Math.floor(lefttime / 1000 % 60);  //计算秒数
        return this.tow(lefth) + ":" + this.tow(leftm) + ":" + this.tow(lefts);  //返回倒计时的字符串
      },
      tow(n) {
        return n >= 0 && n < 10 ? '0' + n : '' + n;
      },
      // 新增延时工位号
      addTeam() {
        let obj = {
          stationCode: '',//延时工位号
          delayPost: '',//统一延时还是分岗位延时
          delayPostName: 1,//统一延时场次
          unifyDelayList: [],//统一延时的集合
          delayMinute: '',//统一延时分钟
          delayPostName2: 1,//分岗位延时场次
          postName: [],//延时岗位选中
          taskInfo: [],//考试岗位信息
          selectTaskInfo: {},//选中的那场考试的信息
        };
        this.ruleForm.push(obj)
      },
      //删除
      deleteItemFn(ind) {
        this.ruleForm.splice(ind, 1)
      },
      //弹窗确认事件
      sureFn() {
        if (this.dialogType == 1) {
          let flg2 = false;
          this.ruleForm.forEach((item, index) => {
            //工位号
            if (!item.stationCode) {
              return this.notifyInfoFn(`第${index + 1}个的工位号未填写`)

            }
            if (item.delayPost !== 0 && item.delayPost !== 1) {
              return this.notifyInfoFn(`${item.stationCode}号工号位未选择延时类型`)

            }
            //统一延时
            if (item.delayPost === 0) {
              if (!item.delayMinute) {
                return this.notifyInfoFn(`${item.stationCode}号工号位的延时时间未设置`)
              }
            }
            //分岗延时
            if (item.delayPost == 1) {
              if (item.postName.length < 1) {
                return this.notifyInfoFn(`${item.stationCode}号工号位未选择延时岗位`)
              } else {
                let flg = true;
                item.postName.forEach(v => {
                  if (!v.DelayMinutes) {
                    flg = false;
                    return this.notifyInfoFn(`${item.stationCode}号工号位的${v.PositionName}岗位延时时间未设置`)
                  }
                })
                if (!flg) {
                  return
                }
              }

            }
            //遍历场次信息
            item.taskInfo.forEach(v => {
              //如果是统一延时，当选中的场次类型和考试场次类型相同的时候提取场次的信息
              if ((item.delayPost === 0 && v.CompetitionVenuesType == item.delayPostName) || (item.delayPost == 1 && v.CompetitionVenuesType === item.delayPostName2)) {
                item.selectTaskInfo = v
                if (item.delayPost === 0) {//统一延时
                  if (v.CompetitionVenuesType == 1) {//业财税
                    item.unifyDelayList = v.PositionUserInfos.map(post => {
                      post.DelayMinutes = item.delayMinute;
                      return post
                    })
                  } else {
                    let arr = v.PositionUserInfos.filter(obj => {
                      return (obj.PositionId != 934156270338053 && obj.PositionName != '大数据分析师')
                    })
                    item.unifyDelayList = arr.map(post => {
                      post.DelayMinutes = item.delayMinute;
                      return post
                    })
                  }

                }
              }
            })
            flg2 = true

          });
          if (flg2) {
            let updataArr = [];
            console.log(this.ruleForm);
            this.ruleForm.forEach(item => {
              if (item.delayPost == 1) {
                item.postName.forEach(val => {
                  let object = {
                    "taskId": item.selectTaskInfo.TaskId,
                    "venuesId": item.selectTaskInfo.VenuesId,
                    "examId": item.selectTaskInfo.ExamId,
                    "groupId": item.selectTaskInfo.GroupId,
                    "groupNo": item.stationCode,
                    "userId": val.UserId,
                    "mobilePhone": val.MobilePhone,
                    "positionId": val.PositionId,
                    "positionName": val.PositionName,
                    "delayMinutes": val.DelayMinutes
                  }
                  updataArr.push(object)
                })

              } else {
                item.unifyDelayList.forEach(val => {
                  let object = {
                    "taskId": item.selectTaskInfo.TaskId,
                    "venuesId": item.selectTaskInfo.VenuesId,
                    "examId": item.selectTaskInfo.ExamId,
                    "groupId": item.selectTaskInfo.GroupId,
                    "groupNo": item.stationCode,
                    "userId": val.UserId,
                    "mobilePhone": val.MobilePhone,
                    "positionId": val.PositionId,
                    "positionName": val.PositionName,
                    "delayMinutes": val.DelayMinutes
                  }
                  updataArr.push(object)
                })
              }
            })
            // console.log(updataArr,77777);
            this.resolutionRuleForm = updataArr
            this.dialogType = 3
          }
        } else if (this.dialogType == 2) {

        } else if (this.dialogType == 3) {
          this.innerVisible = true
        }
      },
      //取消
      noSureFn() {
        if (this.dialogType == 3) {
          this.dialogType = 1
        } else {
          this.dialogVisible = false
        }

      },
      //提示信息
      notifyInfoFn(msg) {
        return this.$notify.info({
          title: '消息',
          message: msg
        });

      },
      //提交延时
      submitDelayFn() {
        // console.log(this.resolutionRuleForm);
        // return;
        // console.log('提交延时');
        this.$api.examDelayService.addtaskdelayrecords({examDelayRecords: this.resolutionRuleForm}).then(res => {
          // console.log(res,'提交延时');
          if (res.Code == 200 && res.Data) {
            this.innerVisible = false
            this.dialogVisible = false
            this.getDelayRecordListFn()
          } else {
            this.$notify({
              title: "提示",
              type: "info",
              message: res.Msg
            });
            this.innerVisible = false
            return;
          }
        }).catch(err => {
          console.log(err, 'err');
        })

      },
      //只能输数字
      inputNumberChangeFn(val, str, ind) {
        // console.log(val);
        this.ruleForm[ind][str] = val.replace(/\D/g, '')
      },
      //选择组改变,获取岗位信息
      groupSelectFn(val, k) {
        this.$api.examDelayService.getvenueslistbytaskid({groupNo: val}).then(res => {
          // console.log(res,'组号,获取岗位信息');
          if (res.Code == 200) {
            res.Data.forEach(item => {
              item.PositionUserInfos.forEach(v => {
                v.DelayMinutes = '';
              })
            });
            this.ruleForm[k].unifyDelayList = [];
            this.ruleForm[k].postName = [];
            this.ruleForm[k].delayMinute = '';
            this.ruleForm[k].taskInfo = res.Data
          }
        }).catch(err => {
          console.log(err);
        })
      },
      //根据taskId获取组号
      getGroupNoInfoFn() {
        this.$api.examDelayService.getgroupnoinfo().then(res => {
          // console.log(res,'组号');
          if (res.Code == 200) {
            this.groupNoList = res.Data
          }
        }).catch(err => {
          console.log(err);
        })
      },
      //获取延时列表
      getDelayRecordListFn() {
        this.$api.examDelayService.getdelayrecordlist().then(res => {
          // console.log(res,'延时记录列表');
          if (res.Code == 200) {
            res.Data.forEach(v => {
              v.CreateTime2 = v.CreateTime.split('T')[0].split('-').join('.') + ' ' + v.CreateTime.split('T')[1].split('.')[0]
            })
            this.list = res.Data
            this.init()
          }
        }).catch(err => {
          console.log(err);
        })
      },
      //初始化倒计时
      init() {
        if (this.list.length > 0) {
          this.newTime = new Date(this.list[0].DateTimeNow).getTime();
          this.list.forEach(val => {
            // console.log(val);
            //结束时间为创建时间加上延时时间
            val.endTime = new Date(val.CreateTime).getTime() + val.DelayMinutes * 60000
          });
          this.setTime();
        }

      }
    },

    beforeDestroy() {
      clearInterval(this.times);
      this.times = null;
    },
    watch: {
      // dialogType: {
      //   handler(val, oldVal) {
      //     if (this.dialogVisible && val == 2) {
      //       // this.delayDetailList.forEach(val =>{
      //       //     if(val.delayPost == 1) {
      //       //         val.postName.forEach(v => {
      //       //             v.endTime = new Date().getTime() + v.delayTime*60000
      //       //         })
      //       //     }else{
      //       //         val.endTime = new Date().getTime() + val.delayTime*60000
      //       //     }
      //       // })
      //       // this.setTime();
      //
      //
      //       this.newData = new Date('2020/7/29 14:00:00').getTime();
      //       this.delayDetailList.forEach(val => {
      //         if (val.delayPost == 1) {
      //           val.postName.forEach(v => {
      //             v.endTime = new Date('2020/7/29 14:00:00').getTime() + v.delayTime * 60000
      //           })
      //         } else {
      //           val.endTime = new Date('2020/7/29 14:00:00').getTime() + val.delayTime * 60000
      //         }
      //       });
      //       this.setTime();
      //     } else if (!this.dialogVisible || val != 2) {
      //       clearInterval(this.times);
      //       this.times = null;
      //     }
      //   }
      // },
      showDialog: {
        handler(val, oldVal) {
          if (val) {
            this.dialogVisible = true
            this.dialogType = 1;
          }
        }
      }

    }
  }
</script>

<style lang="less">
  .delaySet {
    box-sizing: border-box;
    padding: 50px 30px;

    p {
      margin-bottom: 0;
    }

    .btnBox {
      text-align: right;
      margin-bottom: 20px;

      span {
        display: inline-block;
        width: 188px;
        height: 42px;
        background: linear-gradient(90deg, rgba(2, 169, 254, 1) 0%, rgba(6, 136, 250, 1) 100%);
        box-shadow: 0px 8px 16px 0px rgba(2, 167, 254, 0.1);
        border-radius: 2px;
        filter: blur(0px);
        font-size: 14px;
        font-family: PingFangHK-Medium, PingFangHK;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 42px;
        text-align: center;
        cursor: pointer;
      }
    }

    .tabTitle {
      .el-col {
        font-size: 14px;
        font-family: PingFangHK-Medium, PingFangHK;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        padding: 20px 0;
        text-align: center;
        box-sizing: border-box;
      }
    }

    .delaySetContent {
      border-top: 1px solid rgba(235, 235, 235, 1);

      .el-col {
        min-height: 54px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        text-align: center;
        font-size: 14px;
        font-family: PingFangHK-Regular, PingFangHK;
        font-weight: 400;
        color: rgba(51, 51, 51, 0.8);
      }

      .status {
        color: rgba(153, 153, 153, 1);
      }

      .orange {
        color: rgba(251, 35, 0, 1);
      }

      .operation {
        color: rgba(6, 142, 251, 1);
        text-decoration: underline;
        cursor: pointer;
      }
    }

    .placeholderInfo {
      min-height: 400px;

      p {
        text-align: center;
        margin-top: 250px;
        font-size: 18px;
      }
    }

    .borderBottom {
      border-bottom: 1px solid rgba(235, 235, 235, 1);

      .name {
        font-size: 18px;
        font-family: PingFangHK-Medium, PingFangHK;
        font-weight: 600;
        color: rgba(6, 137, 250, 1);
      }
    }

    .delaySetDialog {
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, .3);

      .el-dialog {
        /*margin-top: 20vh !important;*/
        margin: 0 !important;
        height: 710px;

        .el-dialog__header {
          box-sizing: border-box;

          i {
            font-size: 20px;
            font-weight: 600;
          }

          .title {
            font-size: 18px;
            font-family: PingFangHK-Medium, PingFangHK;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            box-sizing: border-box;
            padding-bottom: 10px;

          }

          .borderBottom {
            border-bottom: 1px solid rgba(216, 216, 216, 1);
          }
        }

        .el-dialog__body {
          padding: 0 33px;
          height: 565px;
          overflow-y: auto;
          overflow-x: hidden;

          /*延时设置弹窗*/

          .delaySetSet {
            margin-top: 20px;

            .el-form {
              .delaySetSetItem {
                position: relative;

                .text {
                  color: #999;
                  font-size: 14px;
                  margin-left: 10px;
                }

                .deleteItem {
                  position: absolute;
                  cursor: pointer;
                  color: #999;
                  font-size: 20px;
                  top: 50%;
                  right: 20px;
                  transform: translateY(-50%);
                }

                .el-form-item__label {
                  font-size: 14px;
                  font-family: PingFangHK-Medium, PingFangHK;
                  font-weight: 600;
                  color: rgba(51, 51, 51, 1);
                  padding: 0;

                  &::before {
                    display: none;
                  }
                }

                .el-form-item__content {
                  /*margin-left: 10px !important;*/
                  /*margin-top: 0;*/
                  /*line-height: 20px;*/
                  /*margin-bottom: 7px;*/

                  .el-radio {
                    margin-right: 59px;

                    .el-radio__input {
                      .el-radio__inner {
                        width: 16px;
                        height: 16px;
                      }
                    }

                    .el-radio__input.is-checked {
                      .el-radio__inner {
                        color: #fff;
                        border-color: #fff;
                        background: url("/static/img/选择.png") #fff no-repeat;

                        &::after {
                          display: none;
                        }
                      }
                    }

                    .el-radio__label {
                      font-size: 14px;
                      font-family: PingFangHK-Medium, PingFangHK;
                      color: rgba(51, 51, 51, 1);
                      font-weight: 600;
                    }

                    .el-radio__input.is-checked + .el-radio__label {
                      color: #262734;
                    }
                  }
                }

              }

              .delayPost {
                label {
                  /*width: 75px !important;*/
                }

                .el-form-item__content {
                  margin-left: 65px !important;

                  .el-radio-group {
                    display: inline-block;
                    margin-top: 15px;
                    margin-right: 10px;

                    .unify {
                      margin-bottom: 20px;
                    }

                    .unify2 {
                      height: 32px;
                      line-height: 32px;

                      &:nth-of-type(1) {
                        margin-bottom: 5px;
                      }

                      label {
                        height: 32px;
                        line-height: 32px;
                      }

                      .delayMinute {
                        display: inline-block;
                        height: 32px;
                        font-size: 12px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(153, 153, 153, 1);

                        .el-input {
                          width: 88px;
                          margin-right: 5px;
                        }
                      }
                    }
                  }


                }
              }

              .delayPostName1 {
                padding-left: 55px;

                .el-radio {
                  margin-right: 0 !important;
                }

                .el-radio__label {
                  font-weight: 500 !important;
                  color: rgba(102, 102, 102, 1) !important;
                  font-family: PingFangHK-Regular, PingFangHK !important;
                }

                .el-radio__input.is-checked + .el-radio__label {
                  color: #2BA1FF !important;
                }
              }

              .unify {
                margin-bottom: 16px;
              }

              .delayPostName2 {
                .differentiate {
                  padding-left: 55px;

                  .el-radio {
                    margin-right: 0 !important;
                    /*margin-bottom: 12px;*/
                  }

                  .el-radio__label {
                    font-weight: 500 !important;
                    color: rgba(102, 102, 102, 1) !important;
                    font-family: PingFangHK-Regular, PingFangHK !important;
                  }

                  .el-radio__input.is-checked + .el-radio__label {
                    color: #2BA1FF !important;
                  }

                  .competition {
                    flex: 1;
                    height: 100%;
                    /*border: 1px solid #000;*/

                    .competitionTitle {
                      font-size: 14px;
                      font-family: PingFangHK-Medium, PingFangHK;
                      font-weight: 600;
                      color: rgba(51, 51, 51, 1);
                      margin-bottom: 12px;
                    }

                    .el-checkbox-group {
                      margin-top: 12px;
                      box-sizing: border-box;
                      padding: 18px 30px;
                      border-radius: 2px;
                      border: 1px solid rgba(239, 239, 239, 1);

                      .item {
                        margin-bottom: 19px;
                        /*height: 40px;*/
                        height: 32px;

                        &:last-of-type {
                          margin-bottom: 0;
                        }

                        .el-checkbox {
                          height: 32px;
                          line-height: 32px;

                          .el-checkbox__input {
                            /*float: right;*/
                            /*margin-top: 13px;*/

                            .el-checkbox__inner {
                              border-radius: 50%;
                            }

                          }

                          .el-checkbox__label {
                            /*width: 70px;*/
                            width: 100px;
                            /*padding-left: 0;*/
                            /*padding-right: 10px;*/
                          }
                        }

                        .right {
                          display: inline-block;
                          margin-left: 10px;

                          .el-select {
                            width: 168px;
                          }

                          .delayMinute {
                            width: 66px;
                            margin: 0 6px 0 11px;
                          }

                          .text {
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #999;
                          }
                        }
                      }
                    }

                  }

                  .competition:nth-of-type(1) {
                    margin-right: 10px;
                  }
                }
              }
            }

          }

          /*延时明细弹窗*/

          .delayDetailDialog {
            box-sizing: border-box;
            border-radius: 2px;
            border: 1px solid rgba(239, 239, 239, 1);

            .bdt {
              border-top: 1px solid rgba(239, 239, 239, 1);
            }

            .bdl {
              border-left: 1px solid rgba(239, 239, 239, 1);
            }

            .bdb {
              border-bottom: 1px solid rgba(239, 239, 239, 1);
            }

            .bdr {
              border-right: 1px solid rgba(239, 239, 239, 1)
            }

            .tabTitle {
              .el-col {
                padding: 16px 0;
              }

              th:nth-of-type(1) {
                width: 60px;
              }

              th:nth-of-type(2) {
                width: 100px;
              }

              th:nth-of-type(3) {
                width: 80px;
              }

              th:nth-of-type(4) {
                width: 100px;
              }

              th:nth-of-type(5) {
                width: 80px;
              }

              th:nth-of-type(6) {
                width: 80px;
              }

              th:nth-of-type(7) {
                width: 80px;
              }

            }

            .tabBody {
              font-size: 13px;
              font-family: PingFangHK-Regular, PingFangHK;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              line-height: 53px;
              min-height: 53px;
              /*display: flex;*/
              /*justify-content: center;*/
              /*align-items: center;*/
              text-align: center;
              box-sizing: border-box;

              .el-row:last-of-type {
                .el-col {
                  border-bottom: none;
                }
              }

              .el-col {
                box-sizing: border-box;
              }

              .serial {
              }

              .teamNumber {
              }

              .delayTime {
                border-left: 1px solid rgba(239, 239, 239, 1);
                border-bottom: 1px solid rgba(239, 239, 239, 1);
              }

              .countDown {
                min-height: 64px;
                border-left: 1px solid rgba(239, 239, 239, 1);
                border-bottom: 1px solid rgba(239, 239, 239, 1);
              }

              .delayPost {
                box-sizing: border-box;
                /*border-right: 1px solid rgba(239, 239, 239, 1);*/
                /*border-left: 1px solid rgba(239, 239, 239, 1);*/
                /*border-bottom: 1px solid rgba(239, 239, 239, 1);*/
              }

              .postName {
                box-sizing: border-box;
                border-left: 1px solid rgba(239, 239, 239, 1);
                border-bottom: 1px solid rgba(239, 239, 239, 1);
              }

              .operation {
                border-left: 1px solid rgba(239, 239, 239, 1);
                border-bottom: 1px solid rgba(239, 239, 239, 1);

                p {
                  cursor: pointer;
                  text-decoration: underline;
                  color: rgba(4, 151, 248, 1);
                }
              }

              .morePost {
                /*clear: both;*/

                .el-col {
                  min-height: 53px;
                  line-height: 53px;
                }
              }
            }

            .bdbn {
              > .el-col {
                border-bottom: none;
              }
            }
          }


        }

        .el-dialog__footer {
          padding: 20px;

          .dialog-footer {
            .btn {
              display: inline-block;
              text-align: center;
              width: 118px;
              height: 38px;
              line-height: 38px;
              border-radius: 2px;
              font-size: 13px;
              font-family: PingFangHK-Regular, PingFangHK;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              cursor: pointer;
            }

            .cancel {
              border: 1px solid rgba(4, 151, 248, 1);
              box-sizing: border-box;
              color: rgba(4, 151, 248, 1);
              vertical-align: middle;
              margin-right: 10px;
            }

            .sure1, .sure3 {
              background: linear-gradient(90deg, rgba(2, 169, 254, 1) 0%, rgba(6, 136, 250, 1) 100%);
              box-shadow: 0px 8px 16px 0px rgba(2, 167, 254, 0.1);
              border-radius: 2px;
              filter: blur(0px);

            }

            .sure2 {
              background: rgba(248, 88, 4, 1);
            }

            .addTeam {
              font-size: 14px;
              font-family: PingFangHK-Regular, PingFangHK;
              font-weight: 400;
              color: rgba(248, 110, 4, 1);
              cursor: pointer;
              float: left;
              line-height: 38px;
            }
          }

        }

      }
    }

    .delaySetDialog2 {
      .el-dialog {
        /*margin-top: 65px !important;*/
        /*margin-top: 88px !important;*/
      }

    }
  }

  .delaySetInnerVisibleDialog {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .1);

    p {
      margin-bottom: 0;
    }

    .el-dialog {
      margin: 0 !important;
      border-radius: 6px;

      .el-dialog__header {
        display: none;
      }

      .el-dialog__body {
        padding: 35px 20px;
        text-align: center;

        .textInfoMain {
          width: 224px;
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 20px;
        }

        .footWrap {
          margin-top: 30px;

          span {
            display: inline-block;
            cursor: pointer;
            width: 110px;
            height: 36px;
            background: #FFFFFF;
            border-radius: 2px;
            border: 1px solid #0497F8;
            line-height: 36px;
            font-size: 13px;
            font-family: PingFangHK-Regular, PingFangHK;
            font-weight: 400;
            color: #0497F8;
            box-sizing: border-box;

            &:nth-of-type(2) {
              filter: blur(0px);
              background: linear-gradient(90deg, #02A9FE 0%, #0688FA 100%);
              color: #fff;
              margin-left: 10px;
            }

          }
        }
      }

    }
  }
</style>
